<template>
  <view class="order-main">
    <span class="title-order">我的订单</span>
    <div class="line"></div>
    <div class="box-wrap">
      <div
        v-for="(item, idx) in commListData"
        :key="idx"
        class="box-small"
        @click="
          () => {
            handleClick(item)
          }
        "
      >
        <div class="title-row">
          <img
            class="icon"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f"
          />
        </div>
        <div class="community-name">{{ item.name }}</div>
      </div>
    </div>
  </view>
</template>
  
<script setup>
// interface ICommList {
//     name: string
//     key: number
//     img: string
//     path?: string
// }
const commListData = [
  {
    name: '社区商店',
    key: 0,
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f',
  },

  {
    path: '/views/activityPages/order/my-share-order',
    name: '共享预约',
    key: 2,
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f',
  },
  {
    path: '/views/activityPages/convenience/my-convenience-order',
    name: '便民服务',
    key: 3,
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f',
  },
  {
    name: '自助消费',
    key: 4,
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f',
  },
  {
    path: '/views/activityPages/activity/my-activity',
    name: '活动预约',
    key: 5,
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f',
  },
]
function handleClick(item) {
  if (item.path) {
    // uni.navigateTo({
    //     url: item.path
    // })
  }
}
// import CardHead from './compoents/card-head/'
</script>
  
<style lang="scss" scoped>
.order-main {
  height: 13rem;
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
  background: #fff;
  opacity: 1;
  .title-order {
    color: #333;
    height: 38px;
    font-size: 15px;
    padding-left: 10px;
    display: inline-block;

    line-height: 38px;
  }
  .line {
    width: 100%;
    height: 1px;
    background: #f5f0f0;
  }
  .box-wrap {
    display: flex;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    justify-content: space-between;
    .box-small {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      .title-row {
        .icon {
          width: 24px;
          height: 24px;
        }
      }
      .community-name {
        margin-top: 0.5rem;
        font-size: 1.4rem;
      }
    }
  }
}
//  .minePage{
//    min-height: 100vh;
//    width: 100%;
//    background: #f7f5f5;
//  }
</style>